Organizes UI elements.
Allows sensible grouping of elements.
fluidPage() –fixedPage() – just rows and columnsfullPage() – fills up the browser windowtagList() – just sequentialnavbarPage() – use with tabPanel() and navbarMenu()miniUI::miniUI() – for add-ins or mobileruntime::shiny in an Rmd file – for reportsfluidPage()An organization using the Bootstrap CSS/JavaScript/HTML system.
Define containers based on a 12-unit wide grid.
We’re now going to throw away the original UI for Project 1.
Muggle.R. What kind of thing is First, Second, and so on in terms of user interfaces.app.R file to source the UI defined in UI-languages.R.UI-languages.R is tagList().
tagList() with fluidPage()? Talk to your neighbor about what you expect to put a stake in the ground.Nothing much was different between fluidPage() and tagList() in the previous exercise:
In order to get things laid out, we need to specify rows and columns for the 12-unit Bootstrap grid.
Use fluidRow(...) to group elements in a row.
Use column(width=..., ...) to group elements in a column of the indicated width.
Edit UI-languages.R to change the UI to this.
UI <- fluidPage(
fluidRow(
column(width = 4, First, Second),
column(width = 3, Third)
),
fluidRow(Fourth, Fifth),
title = "Fluid!"
)
Your turn: Draw this as a tree with First, Second as the leaves and UI layout statements as the nodes. Hint: The root is at fluidPage().
What’s up with title = "Fluid!"?
The layout depends on the width of the device.
| Narrow window | Wide window |
|---|---|
Draw this interface as a tree. Remember, the nodes are UI layout functions (like column()) and the leaves are First, Second and so on.
Modify UI-languages.R to implement this tree.
UI <- fluidPage(
fluidRow(
column(width = 4, First, Second, Third),
column(width = 6,
column(width=8, Fourth),
column(width=3, Fifth)
)
)
)
Implement this UI. You’ll need to use both the
width and offset arguments to column().
UI <- fluidPage(
fluidRow(
column(width = 4, First, Second, Third),
column(width = 6, offset = 1,
column(width=8,Fourth),
column(width=3, offset=1, Fifth)
)
)
)
titlePanel()sidebarLayout() with sidebarPanel() & mainPanel()tabsetPanel() and tabPanel()splitLayout()flowLayout()verticalLayout()wellPanel()Use fluidPage(), titlePanel(), and wellPanel()
UI <-
fluidPage(
titlePanel("My App's Title"),
fluidRow(
column(width = 4,
wellPanel(
First,
wellPanel(
Second),
Third)),
column(width = 8,
wellPanel(
Fourth),
Fifth)
)
)
Use fluidPage(), sidebarLayout(), sidebarPanel(), mainPanel()andwellPanel()`
UI <-
fluidPage(
sidebarLayout(
titlePanel("My App's Title"),
sidebarLayout(
sidebarPanel(
First,
wellPanel(Second)),
mainPanel(
fluidRow(
column(Third, width=8),
column(Fourth, width=4)),
Fifth)
)
)
)
tagList() – just sequentialfluidPage() – Bootstrap gridnavbarPage() – use with tabPanel() and navbarMenu()miniUI::miniUI()miniUI::miniPage(
miniTitleBar("A miniPage App"),
miniContentPanel(Fourth),
miniTabstripPanel(
miniTabPanel(title = "Chinese",
miniButtonBlock(
actionButton("reset", "Reset to defaults"),
actionButton("clear", "Clear all")
),
Fifth),
miniTabPanel(title = "Ukrainian",
miniTabstripPanel(
miniTabPanel(title="First", First),
miniTabPanel(title="Second", Second)),
Third),
miniTabPanel(title = "Others",
First,
Second,
Third)
)
The Economist’s Big Mac index visualizer isn’t written as a Shiny app (I think!), but sketch out how you would write a Shiny app to mimic it.